<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="../js/babel.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

<script type="text/babel">
  class Login extends React.Component {
    state = {
      userInfo: {
        username: '',
        password: ''
      }
    }

    /**
     * 这里使用函数的柯里化 
     * 如果回调函数没有参数 你是将这个函数作为onChange 的回调 但是你添加了参数后 他会直接执行这个函数 然后将这个函数的返回值作为回调
     * 这样 你直接将一个函数作为返回值 那么handleFormData 这个函数就相当于接收了两个参数了 一个是你给传递进来的 一个是event
     * 最后 onChage 的回调还是一个函数 只不过是handleFormData 返回的参数-> 函数
     */
    handleFormData = (type) => {
      return (event) => {
        this.setState({
          userInfo: {
            ...this.state.userInfo,
            [type]: event.target.value
          }
        })
      }
    }

    handleSubmit = (e) => {
      e.preventDefault()
      const { username, password } = this.state.userInfo
      alert(`用户名: ${username}, 密码: ${password}`)
    }

    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            用户名
            <input type="text" onChange={this.handleFormData('username')} name='username' />
          </label>
          <label>
            密码
            <input type="password" onChange={this.handleFormData('password')} name='password' />

          </label>
          <button>登录</button>
        </form>
      )
    }
  }

  /**
   * 当然 你这里也可以不用使用函数的柯里化去获取两个参数
   * 可以这样写: onChange 不是需要一个函数作为回调吗 你直接给一个函数给他 (e) => {this.handleFormData(type, e)}
   * 这样也是可以实现传递参数的
   */

  ReactDOM.render(<Login />, document.getElementById('root'))

</script>